<template>
	<!-- <el-dialog v-model="visible" title="明细 " :close-on-click-modal='false' :close-on-press-escape='false'
		:fullscreen='true'> -->
	<div class="mod-lswms__orderdetail">
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
			<el-form-item>
				<el-input v-model="dataForm.sku" size="small" placeholder="物料编码" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="dataForm.descr" size="small" placeholder="物料名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<!-- <el-input v-model="dataForm.status" placeholder="状态" clearable></el-input> -->
				<el-select size="small" v-model="dataForm.status " placeholder="请选择">
					<el-option value="" label="--"> </el-option>
					<el-option v-for="item in ordersStatus" :key="item.list" :label="item.listname"
						:value="reString(item.list)">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item>
				<el-button @click="getDataList()" size="small">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="addOrUpdateOrderdetailHandleFn()"
					v-if="hasPermission('lswms:orders:save')">新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="allocationHandleFn()"
					v-if="hasPermission('lswms:orders:allocation')">分配</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="releaseHandleFn()"
					v-if="hasPermission('lswms:orders:release')">发放</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="deliveryHandleFn()"
					v-if="hasPermission('lswms:orders:delivery')">发货</el-button>
			</el-form-item>
			<!-- 	<el-form-item>
				<el-button type="primary" size="small" @click="closeHandleFn()">结算订单</el-button>
			</el-form-item> -->
			<el-form-item>
				<el-button type="danger" size="small" @click="deleteHandle()"
					v-if="hasPermission('lswms:orders:delete')">删除</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="info" size="small" @click="exportHandle()" v-if="hasPermission('lswms:orders:export')">
					导出</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="showQc()">扫描新增</el-button>
			</el-form-item>

		</el-form>
		<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
			@sort-change="dataListSortChangeHandle" style="width: 100%;">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<!-- <el-table-column prop="id" label="序号" header-align="center" align="center"></el-table-column> -->
			<el-table-column prop="orderkey" label="出库单号" header-align="center" align="center"></el-table-column>
			<el-table-column prop="line" label="行号" header-align="center" align="center"></el-table-column>
			<el-table-column prop="statusstr" label="状态" header-align="center" align="center"></el-table-column>
			<el-table-column prop="sku" label="物料编码" header-align="center" align="center"></el-table-column>
			<el-table-column prop="descr" label="物料名称" header-align="center" align="center"></el-table-column>
			<el-table-column prop="unit" label="单位" header-align="center" align="center"></el-table-column>
			<el-table-column prop="pack" label="包装" header-align="center" align="center"></el-table-column>
			<!-- <el-table-column prop="status" label="状态" header-align="center" align="center">
				<template #default="scope">
					<el-select size="mini" v-model="scope.row.status " placeholder="请选择" disabled>
						<el-option v-for="item in ordersStatus" :key="item.list" :label="item.listname"
							:value="reString(item.list)">
						</el-option>
					</el-select>
				</template>
			</el-table-column> -->

			<el-table-column prop="qty" label="预计数量" header-align="center" align="center"></el-table-column>
			<el-table-column prop="diffqty" label="剩余数量" header-align="center" align="center"></el-table-column>
			<el-table-column prop="allocateqty" label="分配量" header-align="center" align="center"></el-table-column>
			<el-table-column prop="pickqty" label="拣货量" header-align="center" align="center"></el-table-column>
			<el-table-column prop="actqty" label="实际数量" header-align="center" align="center"></el-table-column>

			<!-- <el-table-column prop="allocationstrategy" label="分配策略" header-align="center" align="center">
			</el-table-column> -->
			<el-table-column prop="strategyname" label="分配策略" header-align="center" align="center">
			</el-table-column>
			<!-- <el-table-column prop="rolateby" label="周转" header-align="center" align="center"></el-table-column> -->
			<el-table-column prop="rolatebystr" label="周转" header-align="center" align="center"></el-table-column>
			<el-table-column prop="adduser" label="创建人" header-align="center" align="center"></el-table-column>
			<el-table-column prop="addtime" label="创建时间" header-align="center" align="center"></el-table-column>
			<el-table-column prop="updatuser" label="更新人" header-align="center" align="center"></el-table-column>
			<el-table-column prop="updatetime" label="更新时间" header-align="center" align="center"></el-table-column>

			<el-table-column type="expand" fixed="right" label="详情">
				<template #default="props">
					<el-form label-position="left" inline class="demo-table-expand">
						<!-- <el-table-column prop="fromloc" label="自库位" header-align="center" align="center"></el-table-column>
						<el-table-column prop="fromtray" label="自托盘" header-align="center" align="center"></el-table-column>
						<el-table-column prop="frombox" label="自容器" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot" label="批号" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot1" label="生产日期" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot2" label="有效日期" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot3" label="属性3" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot4" label="属性4" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot5" label="属性5" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot6" label="属性6" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot7" label="属性7" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot8" label="属性8" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot9" label="属性9" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot10" label="属性10" header-align="center" align="center"></el-table-column>
						<el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
						<el-table-column prop="sourcekey" label="来源单号" header-align="center" align="center"></el-table-column>
						<el-table-column prop="sourcetype" label="来源单类型" header-align="center" align="center"></el-table-column>
						<el-table-column prop="sourcedate" label="来源单时间" header-align="center" align="center"></el-table-column>
						<el-table-column prop="relatedorderkey" label="关联单据" header-align="center" align="center">
						</el-table-column>
						<el-table-column prop="relatedorderline" label="关联单据行" header-align="center" align="center">
						</el-table-column>
						<el-table-column prop="backstatus" label="回传状态" header-align="center" align="center"></el-table-column>
						<el-table-column prop="backdate" label="回传时间" header-align="center" align="center"></el-table-column>
						<el-table-column prop="backresult" label="回传结果" header-align="center" align="center"></el-table-column>
						<el-table-column prop="backcode" label="回传码" header-align="center" align="center"></el-table-column>
						<el-table-column prop="warehouse" label="仓库" header-align="center" align="center"></el-table-column>
						<el-table-column prop="adduser" label="创建人" header-align="center" align="center"></el-table-column>
						<el-table-column prop="addtime" label="创建时间" header-align="center" align="center"></el-table-column>
						<el-table-column prop="updatuser" label="更新人" header-align="center" align="center"></el-table-column>
						<el-table-column prop="updatetime" label="更新时间" header-align="center" align="center"></el-table-column> -->

						<el-row>
							<el-col :span="4">
								<el-form-item label="自库位:">
									<span>{{ props.row.fromloc }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="自箱:">
									<span>{{ props.row.fromtray }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="自格:">
									<span>{{ props.row.frombox }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="批号:">
									<span>{{ props.row.lot }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="生产日期:">
									<span>{{ props.row.lot1 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="有效日期:">
									<span>{{ props.row.lot2 }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>

							<el-col :span="4">
								<el-form-item label="是否加长:">
									<span>{{ props.row.lot3 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="价格:">
									<span>{{ props.row.lot4 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="部门/供应商:">
									<span>{{ props.row.lot5 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="计划单号/工序号:">
									<span>{{ props.row.lot6 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="主制车间:">
									<span>{{ props.row.lot7 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="任务编码:">
									<span>{{ props.row.lot8 }}</span>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="4">
								<el-form-item label="新旧:">
									<span>{{ props.row.lot9 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="作废:">
									<span>{{ props.row.lot10 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="炉批号:">
									<span>{{ props.row.lot11 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="材料复验号:">
									<span>{{ props.row.lot12 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="牌号:">
									<span>{{ props.row.lot13 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="属性14:">
									<span>{{ props.row.lot14 }}</span>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="4">
								<el-form-item label="属性15:">
									<span>{{ props.row.lot15 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="来源单时间:">
									<span>{{ props.row.sourcedate }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="来源单类型:">
									<span>{{ props.row.sourcetype}}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="来源单号:">
									<span>{{ props.row.sourcekey}}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="关联单据:">
									<span>{{ props.row.relatedreceiptkey}}</span>
								</el-form-item>
							</el-col>


							<el-col :span="4">
								<el-form-item label="备注:">
									<span>{{ props.row.remark}}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="4">
								<el-form-item label="回传状态:">
									<span>{{ props.row.backstatus}}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="回传时间:">
									<span>{{ props.row.backdate}}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="回传结果:">
									<span>{{ props.row.backresult}}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="回传码:">
									<span>{{ props.row.backcode}}</span>
								</el-form-item>
							</el-col>

						</el-row>
					</el-form>
				</template>
			</el-table-column>

			<el-table-column label='操作' fixed="right" header-align="center" align="center" width="150">
				<template #default="scope">
					<el-button type="text" v-if="scope.row.status==0 && hasPermission('lswms:orders:update')"
						size="small" @click="addOrUpdateOrderdetailHandleFn(scope.row.id,scope.row.orderkey)">修改
					</el-button>
					<el-button type="text" v-if="scope.row.status==0 && hasPermission('lswms:orders:delete') "
						size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
			layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
			@current-change="pageCurrentChangeHandle">
		</el-pagination>
		<!-- 弹窗, 新增 / 修改 -->
		<orderdetailAddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh-data-list="getDataList">
		</orderdetailAddOrUpdate>
	</div>
	<!-- </el-dialog> -->
	<el-dialog v-model="outerVisible" title="扫描新增">
		<el-form >
			<el-form-item>
				<el-input  v-model="qcdata" placeholder="二维码" type="textarea" :autosize="{ minRows: 8, maxRows: 20}" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="putQcData()">提交</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script>
	import DataList from "@/utils/DataList";
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		toRefs
	} from 'vue';
	import orderdetailAddOrUpdate from "@/components/lswms/orders/OrderdetailAddOrUpdate";
	import {
		getCodeListByCode
	} from "@/network/lswms/base/Codelist.js"
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		putAllocation,
		putRelease,
		putDelivery,
		putClose
	} from "@/network/lswms/orders/Orderdetail.js"
	import {
		postQcCreate
	} from "@/network/lswms/orders/Orders.js"
	import {
		hasPermission
	} from "@/utils/hasPermission"
	export default {
		name: "orderdetailTab",
		props: {
			dataForm: {
				type: Object
			}
		},
		components: {
			orderdetailAddOrUpdate,
		},

		setup(props) {
			const {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate
			} = DataList();

			onMounted(() => {
				mixinViewModuleOptions.value.getDataListIsPage = true;
				mixinViewModuleOptions.value.getDataListURL = '/lswms/orderdetail/page';
				mixinViewModuleOptions.value.deleteURL = '/lswms/orderdetail';
				mixinViewModuleOptions.value.exportURL = '/lswms/orderdetail/export';
				mixinViewModuleOptions.value.deleteIsBatchKey = 'id';
				mixinViewModuleOptions.value.deleteIsBatch = true
				dataForm.value.id = props.dataForm.id;
				dataForm.value.orderkey = props.dataForm.orderkey;

				/*console.log(dataForm.value.orderkey)*/
				//	console.log("id:" +props.dataForm.id);
				//	console.log("orderkey:" +props.dataForm.orderkey);
				// if (mixinViewModuleOptions.value.activatedIsNeed) {
				// 	getDataList();
				// }
				// console.log(props);
				// console.log(props.dataForm);
				if (dataForm.value.orderkey) {
					dataForm.value.id = '';
					getDataList()
				}
				ordersStatusFn();
			})

			const visible = ref(false);
			const init = () => {

				visible.value = true;
				nextTick(function() {
					//  dataFormRef.value.resetFields();
					// roleIdListDefault.value = [];
					if (dataForm.value.orderkey) {
						dataForm.value.id = '';
						getDataList()
					}

				})
			}

			// 新增 / 修改
			const addOrUpdateOrderdetailHandleFn = (id) => {
				//
				addOrUpdateVisible.value = true;
				nextTick(function() {
					addOrUpdate.value.dataForm.id = id;
					addOrUpdate.value.dataForm.orderkey = dataForm.value.orderkey;

					addOrUpdate.value.init();
				})
			}

			const ordersStatus = ref("");

			const ordersStatusFn = () => {

				getCodeListByCode('OrderStatus').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					ordersStatus.value = res.data;
				}).catch((err) => {});
			}

			//分配
			const allocationHandleFn = () => {
				if (dataListSelections.value.length <= 0) {
					return ElMessage({
						message: '请出库单明细行',
						type: 'warning',
						duration: 1000
					});
				}
				ElMessageBox.confirm('确定要分配所选的出库单行吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {

					let para = dataListSelections.value.map(function(item) {
						return {
							"orderkey": item["orderkey"],
							"line": item["line"]
						}
					})
					putAllocation(para).then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
							}
						});
					}).catch(function() {});

				}).catch(function() {})

			}


			//发放
			const releaseHandleFn = () => {
				if (dataListSelections.value.length <= 0) {
					return ElMessage({
						message: '请出库单明细行',
						type: 'warning',
						duration: 1000
					});
				}
				ElMessageBox.confirm('确定要发放所选的出库单行吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					let para = dataListSelections.value.map(function(item) {
						return {
							"orderkey": item["orderkey"],
							"line": item["line"]
						}
					})
					putRelease(para).then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
							}
						});
					}).catch(function() {});

				}).catch(function() {})

			}


			//发货
			const deliveryHandleFn = () => {
				if (dataListSelections.value.length <= 0) {
					return ElMessage({
						message: '请出库单明细行',
						type: 'warning',
						duration: 1000
					});
				}
				ElMessageBox.confirm('确定要发货所选的出库单行吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {

					let para = dataListSelections.value.map(function(item) {
						return {
							"orderkey": item["orderkey"],
							"line": item["line"]
						}
					})
					putDelivery(para).then(function(res) {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
							}
						});
					}).catch(function() {});

				}).catch(function() {})
			}

			//结算订单
			const closeHandleFn = () => {
				if (dataListSelections.value.length <= 0) {
					return ElMessage({
						message: '请出库单明细行',
						type: 'warning',
						duration: 1000
					});
				}
				ElMessageBox.confirm('确定要发货所选的出库单行吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {

					let para = dataListSelections.value.map(function(item) {
						return {
							"orderkey": item["orderkey"],
							"line": item["line"]
						}
					})
					putDelivery(para).then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
							}
						});
					}).catch(function() {});

				}).catch(function() {})

			}

			const qcdata = ref('');
			const outerVisible = ref(false);
			const showQc = () => {
				qcdata.value = '';
				outerVisible.value = true;
			}

			const putQcData = () => {
				if (qcdata.value == '') {
					return ElMessage({
						message: '请录入二维码信息',
						type: 'warning',
						duration: 1000
					});
				}
				postQcCreate({
						'QC': qcdata.value,
						'orderkey': props.dataForm.orderkey
					})
					.then((res) => {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
								outerVisible.value = false;
							}
						});
					}).catch()
			}

			return {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate,
				init,
				visible,
				addOrUpdateOrderdetailHandleFn,
				ordersStatus,
				releaseHandleFn,
				allocationHandleFn,
				deliveryHandleFn,
				
				qcdata,
				outerVisible,
				showQc,
				putQcData
			}
		},
		methods: {
			hasPermission,
			reString: function(val) {
				let n = Number(val)
				if (!isNaN(n)) {
					return n
				} else {
					return val
				}
			}
		}
	}
</script>

<style scoped>

</style>
